<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>elementIsVisibleInViewport</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #2396ef;
        }

        .child-1 {
            position: absolute;
            width: 10px;
            height: 10px;
            left: -100%;
            top: -100%;
        }

        .child-2 {
            width: 10px;
            height: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="child-1"></div>
        <div class="child-2"></div>
        打开控制台查看结果
    </div>
    <script>
        const child1 = document.querySelector('.child-1')
        const child2 = document.querySelector('.child-2')
        const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
            const { top, left, bottom, right } = el.getBoundingClientRect();
            const { innerHeight, innerWidth } = window;
            return partiallyVisible
                ? ((top > 0 && top < innerHeight) ||
                    (bottom > 0 && bottom < innerHeight)) &&
                ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
                : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
        };
        console.log(elementIsVisibleInViewport(child1)); // false - (not fully visible)
        console.log(elementIsVisibleInViewport(child2, true)); // true - (partially visible)
    </script>
</body>

</html>